<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <div class="actions" style="margin-bottom: 10px">
                <div class="left">
                    <el-button type="primary" plain size="mini" @click="handleAdd">新增</el-button>
                    <el-button type="primary" plain size="mini" @click="handleDel">删除</el-button>

                </div>
                <div class="right">
                    <el-pagination small :current-page="paginations.pageIndex" :page-sizes="paginations.pageSizes"
                        :page-size="paginations.pageSize" :layout="paginations.layout" :total="paginations.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>
            <el-table ref="multipleTable" :data="tableData" border stripe align="center"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="45"> </el-table-column>
                <el-table-column prop="" fixed label="序号" width="50" type="index"></el-table-column>
                <el-table-column prop="template_name" label="模板名称" width="180">
                </el-table-column>
                <el-table-column prop="file_encoding" label="文件编码" width="180">
                </el-table-column>
                <el-table-column prop="drafter" label="起草人" width="180">
                </el-table-column>
                <el-table-column prop="auditor" label="审核人" width="180">
                </el-table-column>
                <el-table-column prop="approver" label="批准人" width="180">
                </el-table-column>
                <el-table-column prop="revise_count" label="修订次数" width="180">
                </el-table-column>
                <el-table-column prop="reprint_revision" label="再版修订" width="180">
                </el-table-column>
                <el-table-column prop="revised_version" label="修订版本" width="180">
                </el-table-column>
                <el-table-column prop="publish_branch_name" label="发布部门" width="180">
                </el-table-column>
                <el-table-column prop="drafting_date" label="起草日期" width="180">
                    <template slot-scope="scope">
                        <span v-time="scope.row.drafting_date"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="audit_date" label="审核日期" width="180">
                    <template slot-scope="scope">
                        <span v-time="scope.row.audit_date"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="approval_date" label="批准日期" width="180">
                    <template slot-scope="scope">
                        <span v-time="scope.row.approval_date"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="execute_date" label="执行日期" width="180">
                    <template slot-scope="scope">
                        <span v-time="scope.row.execute_date"></span>
                    </template>
                </el-table-column>

                <!-- <el-table-column prop="storage_url" label="培训文件">
                    <template slot-scope="scope">
                        <el-link :href="scope.row.storage_url" target="_blank">{{ scope.row.storage_url }}</el-link>
                    </template>
                </el-table-column> -->
                <el-table-column prop="" fixed="right" align="center" label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button type="text" plain size="mini" @click="handleClickOperation(scope.row, 'detail')">详情
                        </el-button>
                        <el-button type="text" plain size="mini" @click="handleClickOperation(scope.row, 'edit')">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <FileTemplate :mode="mode" :id="nowId" v-if="dialogVisible" :dialogVisible="dialogVisible"
            @close="handleCloseDialog"></FileTemplate>
    </div>
</template>
<script>
import FileTemplate from './components/fileTemplate.vue';
import { FileTemplateList, FileTemplateDelete } from '@/api/qms.js';

export default {
    name: 'fileTemplateList',
    components: { FileTemplate },
    props: [],
    data() {
        return {
            tableData: [],
            paginations: {
                pageIndex: 1, // 当前位于哪页
                pageSize: 20, // 1页显示多少条
                pageSizes: [10, 20, 50, 100], //每页显示多少条
                total: 200,
                layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
            },
            checkedList: [],
            searchParams: {},
            dialogVisible: false,
            nowId: "",
            mode: '',
            rowData: {}
        };
    },
    mounted() {
        this.getDataList();
    },
    methods: {
        handleDel() {
            if (this.checkedList.length === 0) {
                this.$message({
                    message: "请选中后进行操作",
                    type: "warning",
                });
                return;
            }
            FileTemplateDelete({
                ids: this.checkedList
            }).then(res => {
                if (res.code === 10000) {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                    this.getDataList();
                }
            });
        },
        handleAdd() {
            this.mode = 'add';
            this.dialogVisible = true;
        },

        handleClickOperation(row, mode) {
            this.nowId = row.id;
            this.mode = mode;
            this.dialogVisible = true;
        },
        handleSelectionChange(checked) {
            this.checkedList = checked.map((item) => item.id);
        },
        handleCloseDialog(isUpdate) {
            this.dialogVisible = false;
            isUpdate && this.getDataList();
        },
        // 每页条数改变
        handleSizeChange(val) {
            this.paginations.pageSize = val;
            this.getDataList();
        },
        // 当前页改变
        handleCurrentChange(val) {
            this.paginations.pageIndex = val;
            this.getDataList();
        },
        getDataList() {
            FileTemplateList({
                page: this.paginations.pageIndex,
                page_size: this.paginations.pageSize,
                ...this.searchParams,
            }).then((res) => {
                this.tableData = res.data.list || [];
                this.paginations.total = res.data.pagination.total;
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.wrapper {
    // padding: 10px;
    padding-top: 5px;
    padding-left: 5px;

    // background-color: #fff;
    .content-wrapper {
        padding: 10px;
        background-color: #fff;
    }

    .orderHeader {
        margin-top: 5px;
        background-color: #fff;

        .orderSearch {
            form {
                ::v-deep .el-form-item__label {
                    font-size: 14px;
                }

                .el-textarea {
                    width: 135px;
                }
            }
        }
    }

    .actions {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        background-color: #fff;

        .el-button+.el-dropdown,
        .el-dropdown+.el-button {
            margin-left: 10px;
        }
    }
}
</style>